<template>
    <div id="login">
        <div class="login-content">
            <div class="login-weaper">
                <div class="login-left">
                    <div class="left-header">
                        <div class="more" @click="dialogVisible = true"><i class="el-icon-more"></i></div>
                        <div class="notice">公告</div>
                    </div>
                    <div class="title" >
                        <div class="title-f" @click="getnotice(item)" v-for="(item) in notic" >
                            <i class="left el-icon-data-line"></i>
                            <p class="center">{{ item.noticeTitle }}</p>
                            <p class="right">{{ item.createTime }}</p>
                        </div>
                    </div>
                </div>
                <div class="login-right">
                    <h4>登录</h4>
                    <div class="account">
                        <el-form label-width="auto" class="userform">
                            <!-- 用户 -->
                            <el-form-item>
                                <el-input style="width:100%" show-message prefix-icon="el-icon-user" v-model="form.username" ></el-input>
                            </el-form-item>
                            <!-- 密码 -->
                            <el-form-item>
                                <el-input show-message prefix-icon="el-icon-lock"  v-model="form.password" type="password" ></el-input>
                            </el-form-item>
                            <!-- 验证码 -->
                            <el-form-item class="images">
                                <el-input show-message prefix-icon="iconfont icon-yanzhengma" v-model="form.code" style="width:79%"></el-input>
                                <img :src="'data:img/png;base64,'+img_picture" alt="图片加载失败" @click="imgChange()">
                            </el-form-item>
                            <!-- 登录按钮 -->
                            <el-form-item class="btn">
                                <el-button type="primary" size="medium" @click="login">登录</el-button>
                            </el-form-item>
                        </el-form>
                        <div class="login-menu">
                            <a href="#" @click="ent" >忘记密码</a>
                            <a href="#">重置密码</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 获取公告 -->
        <el-dialog
          title="更多公告"
          :visible.sync="dialogVisible"
          width="60%"
          >

    <el-table
    class="dialog1"
    :data="notic"
    style="width: 80%"
      >
      <el-table-column
      width="22">
    <i class="left el-icon-data-line"></i>
      </el-table-column>
      <el-table-column
        prop= noticeTitle
        >
        </el-table-column>
        <el-table-column
        prop="createTime"
        width="180">
        </el-table-column>
    </el-table>
          <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
          </span>
        </el-dialog>
        <!-- 公告详情 -->
        <el-dialog
          :visible.sync="dialogVisible2"
          width="70%"
          >
          <div class="father">
            <div class="gg_title">{{ xqtitle }}</div>
            <div class="gg_xx">
                <span>发布者: {{ xqremark }}    </span>
                <span>发布时间:{{ xqTime }}</span>
            </div>
          <div class="gg_content">
            <p>{{ xqcontent }}</p>
          </div>
          </div>
          <span slot="footer" class="dialog-footer">
          </span>
        </el-dialog>
    </div>
</template>

<script>
import {Login , yzm , getInfo,noticeList,getnotice} from '@/axios/axios-api'
export default {
  data() {
    return {
        form:{
            username:'admin',
            password:'admin123',
            // 验证码
            code:'',
            uuid:'',
        },
        img_picture:"",
        Authorization:'',
        // 公告
        notic:[],
        dialogVisible:false,
        dialogVisible2:false,
        xqtitle:'',
        xqcontent:'',
        xqTime:'',
        xqremark:'',

    }
  },

  created(){
    this.imgChange(),
    this.noticeList()
  },
  watch:{
    uuid(){
        this.$nextTick(()=>{
        })
    }
  },
  methods:{
    ent(){
        this.$router.push('./password')
    },
     login(){
        this.form.uuid = this.$store.state.uuid
         Login(this.form).then(res =>{
            // if(res.code == 200){
            //     localStorage.setItem('token',res.token)
            // }
            localStorage.setItem('token',res.token)
                console.log(res);
            this.Authorization = localStorage.getItem('token')
            window.sessionStorage.setItem('token',res.token)
            console.log(this.Authorization);
            getInfo({Authorization:this.Authorization}).then(res =>{
            console.log(res);
            this.$router.push({name:'课题管理'}).catch(()=>{})
        })
    }).catch(err =>{
        this.$message({
            type: 'info',
            message: '密码或者验证码错误,请重新输入。'
          })
    })
    },
    // 验证码
    imgChange(){
        yzm().then(res =>{
        this.img_picture = res.img
        this.$store.state.uuid = res.uuid
    })
    },
    // 公告
    noticeList(){
        noticeList().then(res=>{
            this.notic = res.rows
        })
    },
    // 获取公告信息
    getnotice(item){
        this.dialogVisible2 = true
        getnotice(item.noticeId).then(res=>{
            console.log(res);
            this.xqcontent = res.data.noticeContent
            this.xqtitle = res.data.noticeTitle
            this.xqTime = res.data.createTime
            this.xqremark = res.data.remark
            console.log(this.xqcontent);
        })
    }
  }
}
</script>
<style lang="less" scoped>
.dialog1{
    font-size: 12px;
    margin: auto;
}
.father{
    padding: 10px  40px;
}
.gg_title{
    font-size: 28px;
    text-align: center;
    font-weight: 700;
    margin-top: -10px;
    margin-bottom: 20px;
}
.gg_xx{
    text-align: center;
    font-size: 10px;
    color: #333;
    border-bottom: 1px solid #ddd;
    padding-bottom:10px ;
    margin-bottom: 20px;
}
.gg_content{
    font-size: 14px;
}
</style>
<style lang="less">
body{
    margin: 0;
    padding: 0;
    // text-align: center;
    // background-color: #8df;
}
a{
text-decoration: none;
}
.login-content{
    position: fixed;
    width: 100%;
    height: 100%;
    .login-weaper{
        position: absolute;
        top: 15%;
        left: 0;
        right: 0;
        width: 70%;
        height: 60%;
        margin: 0 auto;
        border: 1px solid blue;
        background-color:#ccc;
        display: flex;
        .login-left{
            width: 50%;
            .left-header{
                font-size: 21px;
                margin-top: 15%;
                margin-left: 3%;
                border-bottom:2px solid blue ;
                .more{
                    float: right;
                }
            }
            .title{
                width: 85%;
                margin-left: 10%;
                margin-top: 10%;
                font-size: 12px;
                .title-f{
                    display: flex;
                    border-bottom: 1px solid red;
                    .center{
                        flex: 1;
                        overflow: hidden;
                        white-space: nowrap;
                        text-overflow: ellipsis;
                        text-align: left;
                    }
                    .left{
                        font-size: 16px;
                        margin: auto;
                    }
                    .right{
                        width: 33%;
                        text-align: right;
                    }
                }
            }
        }
        .login-right{
            width: 100%;
            font-size: 21px;
            text-align: center;
            h4{
                margin-top: 15%;
            }
            .account{
                width: 60%;
                margin: auto;
                .userform{
                    width: 100%;
                }
                .btn{
                    width: 100%;
                    button{
                        width: 100%;
                    }
                }
            }
            .login-menu{
                font-size: 14px;
                a{
                    margin-left: 20px;
                    text-decoration: none;
                    color: rgb(230, 230, 230);
                }
            }
        }
    }
}
.images{
    img{

        float: right;
        width: 112px;
        background-color: red;
    }
}
</style>